<template>
	<view class="container">
		<!-- 搜索栏 -->
		<view class="search-bar">
			<uni-search-bar placeholder="搜索标题或人员" v-model="searchText" @confirm="onSearch" />
		</view>

		<!-- 列表 -->
		<view class="list-container">
			<mescroll-uni :down="downOption" :up="upOption" @down="onDown" @up="onUp" :top="100">
				<view v-if="reportList.length > 0" class="list">
					<view class="list-item" v-for="(item, index) in reportList" :key="item.id"
						@click="handleClick(item)">
						<view class="item-header">
							<text class="item-title">{{ item.title }}</text>
							<view class="item-status"
								:class="{'status-draft': item.status === 'draft', 'status-completed': item.status === 'completed'}">
								{{ item.status === 'draft' ? '草稿' : '完成' }}
							</view>
						</view>
						<view class="item-info">
							<text class="item-person">上报人：{{ item.person }}</text>
							<text class="item-time">{{ item.time }}</text>
						</view>
						<view class="item-content">
							<text>{{ item.content }}</text>
						</view>
					</view>
				</view>
				<view v-else class="no-data">
					<noData />
				</view>
			</mescroll-uni>
		</view>
	</view>
</template>

<script>
	import mescrollUni from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-uni.vue';
	import noData from '@/components/noData.vue';

	export default {
		components: {
			mescrollUni,
			noData
		},
		data() {
			return {
				searchText: '',
				reportList: [],
				pageNum: 1,
				pageSize: 5,
				totalCount: 0,
				allMockData: [], // 存储所有模拟数据
				downOption: {
					use: true,
					auto: false,
					offset: 80
				},
				upOption: {
					use: true,
					auto: false,
					page: {
						num: 0,
						size: 5
					},
					noMoreSize: 5,
					empty: {
						tip: '暂无数据'
					}
				}
			};
		},
		onLoad() {
			this.loadData();
		},
		methods: {
			// 加载数据
			loadData() {
				// 模拟数据
				const mockData = [{
						id: 1,
						title: '设备巡检记录 - A栋1楼',
						person: '张三',
						time: '2023-07-15 09:30:00',
						status: 'completed',
						content: 'A栋1楼设备运行正常，无异常情况。'
					},
					{
						id: 2,
						title: '安全检查报告 - 仓库区域',
						person: '李四',
						time: '2023-07-14 15:20:00',
						status: 'completed',
						content: '仓库区域安全检查完毕，消防设备正常，无安全隐患。'
					},
					{
						id: 3,
						title: '环境监测数据 - 园区',
						person: '王五',
						time: '2023-07-13 11:45:00',
						status: 'draft',
						content: '园区环境监测数据待完善，主要包括空气质量、噪音等指标。'
					},
					{
						id: 4,
						title: '设备维护记录 - 空调系统',
						person: '赵六',
						time: '2023-07-12 14:10:00',
						status: 'completed',
						content: '空调系统维护完成，运行状态良好。'
					},
					{
						id: 5,
						title: '电力消耗统计 - 办公楼',
						person: '钱七',
						time: '2023-07-11 10:25:00',
						status: 'draft',
						content: '办公楼电力消耗数据统计中，需核对电表读数。'
					},
					{
						id: 6,
						title: '消防安全检查 - 生产车间',
						person: '孙八',
						time: '2023-07-10 09:00:00',
						status: 'completed',
						content: '生产车间消防安全检查通过，灭火器压力正常，通道畅通。'
					},
					{
						id: 7,
						title: '水质检测报告 - 饮用水',
						person: '周九',
						time: '2023-07-09 16:30:00',
						status: 'completed',
						content: '饮用水水质检测合格，符合国家标准。'
					},
					{
						id: 8,
						title: '设备故障记录 - 电梯系统',
						person: '吴十',
						time: '2023-07-08 13:50:00',
						status: 'completed',
						content: '电梯系统故障已修复，恢复正常运行。'
					},
					{
						id: 9,
						title: '员工体温监测 - 入口',
						person: '郑十一',
						time: '2023-07-07 08:45:00',
						status: 'draft',
						content: '员工体温监测数据整理中，今日无异常体温记录。'
					},
					{
						id: 10,
						title: '仓库库存盘点 - 成品区',
						person: '王十二',
						time: '2023-07-06 15:15:00',
						status: 'completed',
						content: '成品区库存盘点完成，账物一致。'
					}
				];

				// 存储所有数据
				this.allMockData = mockData;
				// 只加载前5条数据
				this.reportList = mockData.slice(0, 5);
				this.totalCount = mockData.length;
			},

			handleClick(item) {
				const config = {
					enCode: "staffOvertime",
					flowId: "469467140492163013",
					formType: null,
					fullName: "管理员的加班申请",
					id: "742400967068090629",
					opType: 1,
					status: 1,
					taskId: "742401510377259269",
					taskNodeId: "742400967294583046",
				}
				uni.navigateTo({
					url: '/pages/infoReport/index?config=' + this.base64.encode(JSON.stringify(config),
						"UTF-8")
				})
			},

			// 搜索
			onSearch() {
				if (this.searchText.trim()) {
					// 模拟搜索逻辑
					const keyword = this.searchText.toLowerCase();
					const filteredData = this.reportList.filter(item =>
						item.title.toLowerCase().includes(keyword) ||
						item.person.toLowerCase().includes(keyword)
					);
					this.reportList = filteredData;
				} else {
					// 如果搜索框为空，重新加载所有数据
					this.loadData();
				}
			},

			// 下拉刷新
			onDown(mescroll) {
				// 模拟网络请求延迟
				setTimeout(() => {
					// 重置页码
					this.pageNum = 1;
					// 重新加载数据
					this.loadData();
					// 隐藏下拉刷新的状态，并传入提示文本
					mescroll.endSuccess(0, '刷新成功');
				}, 800);
			},

			// 上拉加载
			onUp(mescroll) {
				// 这里是模拟上拉加载，实际项目中应该调用接口获取下一页数据
				setTimeout(() => {
					if (this.pageNum * this.pageSize >= this.totalCount) {
						// 没有更多数据了，添加提示文本
						mescroll.endNoMore('没有更多数据了');
					} else {
						// 加载下一页数据
						this.pageNum++;
						// 从已有模拟数据中加载下一页
						const startIndex = (this.pageNum - 1) * this.pageSize;
						const endIndex = Math.min(startIndex + this.pageSize, this.totalCount);
						const newData = this.allMockData.slice(startIndex, endIndex);

						this.reportList = this.reportList.concat(newData);
						// 隐藏上拉加载的状态
						mescroll.endSuccess(newData.length);
					}
				}, 1000);
			}
		}
	};
</script>

<style scoped>
	.container {
		background-color: #e6e6e6;
		box-sizing: border-box;
	}

	.search-bar {
		/* 		margin-bottom: 24rpx;
		padding: 0 8rpx; */
	}

	.list-container {
		width: 100%;
		/* height: calc(100vh - 160rpx); */
	}

	.list {
		width: 100%;
		padding: 0 8rpx;
	}

	.list-item {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 30rpx 32rpx;
		margin-bottom: 24rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
		transition: all 0.3s ease;
		position: relative;
		overflow: hidden;
	}

	.list-item::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 6rpx;
		height: 100%;
		background: linear-gradient(180deg, #409eff 0%, #67c23a 100%);
		border-radius: 6rpx 0 0 6rpx;
	}

	.list-item:hover {
		transform: translateY(-4rpx);
		box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.12);
	}

	.item-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 24rpx;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.item-title {
		font-size: 34rpx;
		font-weight: 600;
		color: #303133;
		flex: 1;
		margin-right: 24rpx;
		line-height: 50rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.item-status {
		padding: 8rpx 24rpx;
		border-radius: 20rpx;
		font-size: 26rpx;
		font-weight: 500;
		white-space: nowrap;
		margin-top: 4rpx;
	}

	.status-draft {
		background-color: #fef0f0;
		color: #f56c6c;
		border: 1rpx solid #fbc4c4;
	}

	.status-completed {
		background-color: #f0f9ff;
		color: #409eff;
		border: 1rpx solid #91ccff;
	}

	.item-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
		font-size: 28rpx;
		color: #606266;
	}

	.item-person {
		display: flex;
		align-items: center;
	}

	.item-person::before {
		content: '';
		display: inline-block;
		width: 28rpx;
		height: 28rpx;
		background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M512 144c-203.0144 0-368 164.9856-368 368s164.9856 368 368 368 368-164.9856 368-368S715.0144 144 512 144z m0 560c-105.6 0-192-86.4-192-192s86.4-192 192-192 192 86.4 192 192-86.4 192-192 192z" fill="%23909399"/></svg>');
		background-size: contain;
		margin-right: 12rpx;
	}

	.item-time {
		display: flex;
		align-items: center;
		color: #909399;
	}

	.item-time::before {
		content: '';
		display: inline-block;
		width: 28rpx;
		height: 28rpx;
		background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M512 88c-234.88 0-424 189.12-424 424s189.12 424 424 424 424-189.12 424-424S746.88 88 512 88z m0 720c-163.52 0-296-132.48-296-296s132.48-296 296-296 296 132.48 296 296-132.48 296-296 296z m144-392V440h-224v-32h224v-64l128 128-128 128v-64z" fill="%23909399"/></svg>');
		background-size: contain;
		margin-right: 12rpx;
	}

	.item-content {
		font-size: 28rpx;
		color: #909399;
		line-height: 48rpx;
		padding-left: 40rpx;
		position: relative;
	}

	.item-content::before {
		content: '';
		position: absolute;
		left: 0;
		top: 24rpx;
		width: 24rpx;
		height: 1rpx;
		background-color: #e4e7ed;
	}

	.no-data {
		padding: 200rpx 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/* 动画效果 */
	@keyframes fadeIn {
		from {
			opacity: 0;
			transform: translateY(20rpx);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.list-item {
		animation: fadeIn 0.5s ease-out;
	}

	/* 滚动条样式 */
	::-webkit-scrollbar {
		width: 8rpx;
		height: 8rpx;
	}

	::-webkit-scrollbar-track {
		background: #f1f1f1;
		border-radius: 4rpx;
	}

	::-webkit-scrollbar-thumb {
		background: #c0c4cc;
		border-radius: 4rpx;
	}

	::-webkit-scrollbar-thumb:hover {
		background: #909399;
	}
</style>